<template>
	<view class="container">
		<view class="browse-list">
			<!-- <view class="time">今天</view> -->
			<view class="product f-a-start" v-for="(item,i) in viewLogs" :key="item.id" @click="goDetail(item.goods_id)">
				<image :src="$imgUrl(item.goods.image)" lazy-load mode="aspectFill" class="pics"></image>
				<view class="right">
					<view class="name ellipsis2">{{item.goods.name}}</view>
					<view class="spec">规格：{{item.goods.attr_name}}</view>
					<view class="bottom f-a-center f-c-between">
						<view class="total f-c-between">
							<view class="price">¥{{item.goods.price}}</view>
							<view class="payde">{{item.goods.sales}}人已付款</view>
						</view>
						<!-- <image src="/static/tab/selectedCart.png" class="icon-cart" @click="btnAddCart(item.goods_id)"></image> -->
					</view>
				</view>
			</view>
		</view>
		<productSpec ref="specPopup" :showBuyBtn="false"></productSpec>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					page: 1,
					limit: 20
				},
				viewLogs: []
			}
		},
		onLoad() {
			this.getViewLogs()
		},
		methods: {
			//获取浏览记录
			getViewLogs() {
				this.$api.get_shop_viewLogs(this.params).then(res => {
					let {
						list,
						total
					} = res
					this.viewLogs = this.viewLogs.concat(list || [])
					this.params.total = total
				})
			},

			//刷新数据
			async onRefreshData() {
				this.params.page = 1
				this.noticeList = []
				await this.getViewLogs()
			},

			//加入购物车
			btnAddCart(goods_id) {
				this.$api.get_shop_addCart({
					goods_id,
					num: 1
				}).then(res => {
					this.$showToast('加入成功')
				})
			},

			//跳转商品详情
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/shop/detail?id=' + id
				})
			},

			//选择规格
			selectSpec() {
				this.$refs.specPopup.showSpecPicker = true
			},
		},
		onPullDownRefresh() {
			this.onRefreshData()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.viewLogs.length == this.params.total) {
				return
			}
			this.params.page++
			this.getViewLogs()
		}
	}
</script>

<style>
	page {
		background-color: #F4F5F7;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding: 28rpx 30rpx;
	}

	.browse-list {
		.time {
			font-weight: 500;
			// font-size: 24rpx;
			font-size: calc(24rpx * 1.4);
			color: #333333;
			padding: 28rpx 0 20rpx;
		}

		.product {
			background: #FFFFFF;
			box-shadow: 0px 0px 18rpx 0px rgba(0, 0, 0, 0.11);
			border-radius: 12rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0rpx;
			}

			.pics {
				width: 152rpx;
				height: 152rpx;
				border-radius: 10rpx;
				margin-right: 24rpx;
			}

			.right {
				flex: 1;

				.name {
					max-height: 80rpx;
					font-weight: 400;
					font-size: 32rpx;
					line-height: 40rpx;
					color: #666666;
				}

				.spec {
					font-weight: 400;
					// font-size: 20rpx;
					font-size: calc(20rpx * 1.4);
					color: #676767;
					margin-top: 8rpx;
				}

				.bottom {
					margin-top: 8rpx;

					.total {
						flex: 1;
					}

					.price {
						min-width: 45%;
						max-width: 50%;
						font-weight: 500;
						font-size: 34rpx;
						color: #EC633A;
					}

					.payde {
						font-weight: 400;
						// font-size: 20rpx;
						font-size: calc(20rpx * 1.4);
						color: #666666;
					}

					.icon-cart {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
		}
	}
</style>